<template>
	<view v-if="store.isLogin==false" style="width: 100%;display: flex;justify-content: center;">
		<span>抱歉,请先登录</span>
	</view>
	<view v-if="store.isLogin==true" class="topBar">
		<view @click="changeShow(0)" :class="index==0?'barItem_selected':'barItem'">待付款</view>
		<view @click="changeShow(1)" :class="index==1?'barItem_selected':'barItem'">已付款</view>
	</view>
	<scroll-view v-if="store.isLogin==true" class="mianBox" scroll-y="true">
		<!-- 待付款 -->
		<view v-show="index==0?true:false" class="mainBox_item">
			<view v-for="(item,index) in store.car" :key='index'>
				<view style="border-bottom: 1px solid; height: 30px;line-height: 30px;font-size: 16px;color: darkgrey;">
					订单编号:{{item.orderId}}
				</view>
				<view v-for="(carItem,index) in item.list" class="card" :key="carItem.foodId">
					<view class="card-img">
						<image :src="carItem.foodImgUrl"></image>
					</view>
					<view class="card-text">
						<view class="card-text_">
							<text>{{carItem.foodName}}:{{carItem.foodDec}}</text>
							<view>
								<view>￥{{carItem.foodPrice}}</view>
								<text>x{{carItem.count}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="pay">
					<button @click="pay(item.orderId,item.totalPrice)" type="primary" size="mini">付款</button>
					<button @click="cancel(item.orderId)" type="warn" size="mini">取消</button>
					<span>共{{item.list.length}}类商品:￥{{item.totalPrice}}</span>
				</view>
			</view>
		</view>
		<!-- 已付款 -->
		<view v-show="index==1?true:false" class="mainBox_item">
			<view v-for="(item,index) in store.car_hadPay" :key='index'>
				<view style="border-bottom: 1px solid; height: 30px;line-height: 30px;font-size: 16px;color: darkgrey;">
					订单编号:{{item.orderId}} {{item.time}}
				</view>
				<view v-for="(carItem,index) in item.list" class="card" :key="carItem.foodId">
					<view class="card-img">
						<image :src="carItem.foodImgUrl"></image>
					</view>
					<view class="card-text">
						<view class="card-text_">
							<text>{{carItem.foodName}}:{{carItem.foodDec}}</text>
							<view>
								<view>￥{{carItem.foodPrice}}</view>
								<text>x{{carItem.count}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="pay">
					<button @click="deleteHistroyOrder(item)" type="warn">删除</button>
					<button v-if="item.isjudge==0" @click="toJudge(item)"  type="primary">评价</button>
					<span>共{{item.list.length}}类商品:￥{{item.totalPrice}}</span>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import Store from "../../store/index.js"
	import { onLoad } from '@dcloudio/uni-app'
	import * as API from "../../api/index.js"
	const store = Store()
	//控制显示哪个板块
	let index = ref(0)
	function changeShow(Index){
		index.value = Index
	}
	//取消订单
	function cancel(orderId){
		console.log(orderId)
		 wx.showModal({
		    title: '取消订单',
		    content: `确定取消订单号为${orderId}的订单吗?`,
		    success: function (res) {
				if(res.confirm) {//这里是点击了确定以后
					store.cancelCar(orderId)
		       }
		    }
		})
	}
	//支付订单
	function pay(orderId,price){
		uni.navigateTo({
			url:`/pages/pay/pay?orderId=${orderId}&&price=${price}`
		})
	}
	//删除历史订单记录
	function deleteHistroyOrder(order){
		uni.showModal({
			title:"删除历史订单",
			content:`确定删除订单号为${order.orderId}的历史订单吗?`,
			success: (result) => {
				if(result.confirm) {//这里是点击了确定以后
					API.deleteHistroyOrder(order.id).then(res1=>{
						if(res1.data.status == 200){
							uni.showToast({
								title:"删除成功",
								icon:'success',
								duration:1500
							})
							store.car_hadPay = reactive([])
							API.getHistoryOrder(store.userInfo.userName).then(res2=>{
								// console.log(res)
								res2.data.orderList.forEach(item=>{
									item.list = JSON.parse(item.list)
									item.totalCount = item.list.length
								})
								store.car_hadPay.push(...res2.data.orderList)
							})
							
						}
					})
				}
			}
		})
		
	}
	
	//发表评价
	function toJudge(item){
		let foodNames = item.list.map((item)=>{
			return item.foodName
		})
		uni.navigateTo({
			url:`/pages/userAbout/judge/judge?orderId=${item.orderId}&&foods=${foodNames.join('+')}`
		})
	}
	
</script>

<style lang="less">
	.topBar{
		height: 40px;
		box-shadow: 1px 1px 1px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.barItem{
			height: 40px;
			line-height: 40px;
		}
		.barItem_selected{
			height: 40px;
			line-height: 40px;
			border-bottom: 3px solid orange;
		}
	}
	.mianBox{
		width: 100vw;
		height: 400px;
		// border: 1px solid;
		.card {
		  width: 100%;
		  height: 100px;
		  display: flex;
		  flex-direction: row;
		}
		.card-img {
		  height: 100px;
		  width: 100px;
		  padding: 7px 7px;
		}	
		.card-img>image {
		  width: 86px;
		  height: 86px;
		}
		.card-text{
		  height: 100px;
		  width: 100%;
		  display: flex;
		  flex-direction: column;
		}
		.card-text_{
		  width: 100%;
		  height: 60px;
		  display: flex;
		  flex-direction: row;
		}
		.card-text_>text {
		  width: 80%;
		  padding-left: 20rpx;
		  color: #444;
		  font-weight: 600;
		  font-size: 10pt;
		}
		.card-text_>view {
		  padding-right: 20rpx;
		  width: 20%;
		  text-align: right;
		}
		.card-text_>view>view {
		  color: #444;
		  font-weight: 600;
		  margin-bottom: 10rpx;
		}
		.card-text_>view>text {
		  font-size: 9pt;
		  color: #999;
		}
		.pay{
			height: 40px;
			border: 1px silver;
			display: flex;
			flex-direction: row-reverse;
			font-size: 16px;
			align-items: center;
			button{
				width: 70px;
				height: 30px;
				border-radius: 6px;
				line-height: 30px;
				margin-right: 10px;
				font-size: 12px;
			}
			span{
				margin-left: 10px;
			}
		}
	}
</style>